<!--
 请求审判
 @Author: zhanbh
 @Date: 2021-04-15
-->
<template>
  <div class="request-trial">
    <div>
      <police-detail :base-info="baseInfo" />
    </div>
    <div>
      <module-card>
        <template #header>指令信息</template>
        <edit-form :model="orderForm" :fields="orderFields" v-bind="formAttrs" :rules="rules">
          <template #item-fileHolders>
            <dg-upload v-model="orderForm.fileHolders" :server-url="'./'" size="30m" tip-msg="上传文件限制大小为 30M">
              <el-button type="primary" plain>上传文件</el-button>
              <template slot="fileList" slot-scope="{ type, name, size }">
                <i :class="`dg-icon-${type}`"></i>
                {{ `${name} (${size / 1024})KB` }}
              </template>
            </dg-upload>
          </template>
        </edit-form>
      </module-card>
      <div class="request-trial__btns">
        <dg-button @click="() => $router.go(-1)">取消</dg-button>
        <dg-button type="primary" @click="handleSuccess" :loading="loading">确定</dg-button>
      </div>
    </div>
  </div>
</template>
<script>
import { getDefaultDept } from '@/api/common';
import EditForm from '@@/edit-form';
import ModuleCard from '@/components/layout/module-card';
import PoliceDetail from '../components/PoliceDetail';
import { jqxxDetail, qqyp } from '@/api/police';
import { mapState } from 'vuex';
import { generateTimeReqestNumber2} from '@/utils/common';

export default {
  name: 'PoliceCommandJudge',
  components: {
    EditForm,
    ModuleCard,
    PoliceDetail
  },
  props: {},
  data() {
    // 验证最晚反馈时间不让选择此刻以前的
    var validateTime = (rule, value, callback) => {
       if(value){
      let time=value.replace(/\-| |:/g,"");
      let currTime=generateTimeReqestNumber2();
      if (time <= currTime) {
        callback(new Error('选择时间必须大于当前时间'));
      } else {
        callback();
      }
       }else{
          callback();
       }
    };

    return {
      loading: false,
      // 表单通用的配置值
      formAttrs: {
        col: 12,
        labelWidth: 'calc(7em + 12px)'
      },
      baseInfo: {},
      orderForm: {
        zllx: '5',
        zlly: '2',
        zwfksj: '',
        jsdwdm: '',
        zlyq: '',
        bz: '',
        fileHolders: []
      },
      rules: {
        zwfksj: [{type:'string', validator: validateTime, trigger: 'change' }]
      },
      timeShortBtns: [
        {
          text: '1小时',
          time: '+60m'
        },
        {
          text: '2小时',
          time: '+1h'
        },
        {
          text: '6小时',
          time: '+3h'
        },
        {
          text: '12小时',
          time: `+6h`
        },
        {
          text: '24小时',
          time: `+12h`
        },
        {
          text: '36小时',
          time: `+18h`
        }
      ],
      pickerOptions: {
      // 限制最晚反馈时间不让选择此刻以前的
      disabledDate(time) {
        return time.getTime() < Date.now() - 8.64e7;
      }
      }
    };
  },
  computed: {
    ...mapState(['constant']),
    orderFields() {
      const _this = this;
      return [
        {
          prop: 'zllx',
          label: '指令类型',
          tag: 'dg-select',
          tagBind: {
            disabled: true,
            data: _this.constant.BM_ZLLX
          }
        },
        {
          prop: 'zwfksj',
          label: '最晚反馈时间',
          col: 12,
          bind: {
            labelWidth: 'calc(7em + 12px)'
          },
          tag: 'dg-date-picker',
          tagBind: {
            type: 'datetime',
            select: 'show',
            isSelect: true,
            shortBtns: this.timeShortBtns,
            placeholder: '请选择最晚反馈时间',
            valueFormat:'yyyyMMddHHmmss',
            format:'yyyy-MM-dd HH:mm:ss',
            pickerOptions: _this.pickerOptions
          }
        },
        {
          prop: 'jsdwdm',
          label: '接收单位',
          tag: 'dg-select',
          tagBind: {
            disabled: true,
            lazyLoad:true,
            data: _this.constant.BM_DEPT
          }
        },
        {
          prop: 'zlyq',
          label: '拟下达指令',
           col: 24,
          tag: 'el-input',
            tagBind: {
            type: 'textarea',
            rows: 3,
            maxlength:'200',
            showWordLimit:true,
            placeholder: '请输入内容'
          }
        },
        {
          prop: 'bz',
          label: '备注',
          col: 24,
          tag: 'el-input',
          tagBind: {
            type: 'textarea',
            rows: 3,
            placeholder: '请输入内容',
             maxlength:'200',
            showWordLimit:true,
          }
        },
        {
          prop: 'fileHolders',
          label: '附件'
        }
      ];
    }
  },

  created() {
    this.$store.dispatch('getConstant', ['BM_ZLLX', 'BM_DEPT']);
    this.id = this.$route.params.id;
    this.getDetail();
    this.getDefault();
  },
  methods: {
    getDetail() {
      jqxxDetail(this.id).then(({ data }) => {
        this.baseInfo = data;
      });
    },
    getDefault() {
      getDefaultDept().then(({ data }) => {
        this.orderForm.jsdwdm = data[0];
      });
    },
    /**
     * 保存成功
     */
    handleSuccess() { 
      this.loading = true;
      qqyp({
        jqxxbh: this.id,
        ...this.orderForm,
        zwfksj:this.orderForm.zwfksj.replace(/\-| |:/g,"") // yyyy-mm-dd hh:mm:ss转换成yyyymmddhhmmss
      })
        .then(() => {
          this.$message.success('反馈成功');
          this.loading = false;
          this.$router.go(-1);
        })
        .catch(() => {
          this.$message.warning('反馈失败');
          this.loading = false;
        });
    },
    /**
     * 附件预览
     */
    handlePreview() {}
  }
};
</script>
<style scoped lang="scss">
.request-trial {
  > div {
    padding: 6px 20px 1px;
    background: #fff;
    margin-bottom: 12px;
    border-radius: 2px;
  }
  .request-trial__btns {
    margin-bottom: 20px;
  }
}
</style>
